<template>
  <div style="padding:20px;display: flex;align-items:center;justify-content: center;">
    <el-form :model="account" ref="accountRef" :rules="loginRules"  style="margin-top:50px;width:400px;">
      <el-form-item label="" prop="username" style="margin-bottom: 20px;">
        <el-input v-model="account.username" placeholder="请输入用户名" >
          <template #suffix><i class="el-icon-user el-input__icon"></i></template>
        </el-input>
      </el-form-item>
      <el-form-item label="" prop="password" style="margin-bottom: 20px;">
        <el-input v-model="account.password"  type="password" placeholder="请输入密码" >
          <template #suffix><i class="el-icon-unlock el-input__icon"></i></template>
        </el-input>
      </el-form-item>
      <el-form-item style="margin-bottom:15px;">
        <el-button type="primary" class="submit" @click="login" :loading="submitLoading" style="width: 100%;">
          登录
        </el-button>
        <div class="text-align-right">
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ref,  reactive } from "vue";
import { ElMessage } from "element-plus";
import { apiLogin} from '../api/api';
import router from "../router/router";
export default {
  name: "Login",
  setup() {
    const accountRef = ref(null);
    //表单字段
    const account = reactive({
      username: "",
      password: "",
    });

    //表单验证validator
    const loginRules = {
      username: [
        {
          required: true,
          message: "请输入用户名",
          trigger: "blur",
        },
        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
      ],
      password: [
        {
          required: true,
          message: "请输入密码",
          trigger: "blur",
        },
        { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
      ],
    };

    //登录
    const login = async () => {
      accountRef.value.validate(async (valid) => {
        if (valid) {
            apiLogin({
              username:account.username,
              password:account.password,
            }).then(res => {
              //成功
              if (res.code == 0) {
                //保存jwt token到本地
                localStorage.setItem('token', res.data.token);
                //提示
                ElMessage.success("登录成功!");
                //跳转到home页
                //router.push({ path: '/home' });

                console.log("currentRoute");
                console.log(router.currentRoute);

                if (router.currentRoute.value.query.redirect) {
                   let redirect = router.currentRoute.value.query.redirect;
                   router.replace({ path: redirect });
                } else {
                   router.replace({ path: "/home/home" });
                }


              } else {
                ElMessage.error("登录失败:"+res.msg);
              }

            }).catch((error) => {
              console.log(error)
            })
        }
      });
    };

    return {
      account,
      loginRules,
      accountRef,
      login,
    };
  },
}
</script>

<style scoped>

</style>
